<template>
  <div id="app" >


  
   
<van-nav-bar class="NavBar" :title="this.$store.state.Title" :left-text="this.$store.state.LeftTitle" :left-arrow="this.$store.state.arrow" @click-left="toBack">
 
  <van-icon v-show="this.$store.state.Right" name="add-o" slot="right"/>
</van-nav-bar>
    

    <div class="scroll" >
     
     
    
       
            <transition :name="transitionName">
           
               <keep-alive include="Home">
                 <router-view class="Router" ></router-view>
               </keep-alive>
           
            </transition>
     
    
      </div>
    
    
    <Menu class="MenuPostion" v-show="this.$store.state.MenuShow"></Menu> 
  </div>
</template>
<script>
import Menu from "@/components/menu";
import { NavBar } from 'vant';


export default {
  provide(){
		return{
      reload:this.reload
     
    
      
		}
	},
  data(){
    return {
       //需要缓存的页面 例如首页
      keepAlive:'main-keep-alive',  
      //初始过渡动画方向
      transitionName: 'slide-right' ,
        
        height:"",
        isRouterAlive:true,
        arrow:false,
        LeftTitle:"返回"
    }
  },
watch: {

    '$route' (to, from) { //监听路由是否变化
      //  当路由跳转时提醒用户去登录
       this.$store.state.MenuShow = true;
           
     let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后
      if(to.path == "/"){ //跳转到哪个页面
       this.$store.state.scrollShow=true;
        this.$store.state.routerShow=false;
          this.$store.state.Title = "首页";
      this.$store.state.arrow = false;
      this.$store.state.LeftTitle = "";
			}else if(to.path == "/login/"){
        this.$store.state.MenuShow = false;
      }else if(to.path == "/friends"){
        this.$store.state.scrollShow=true;
        this.$store.state.routerShow=false;   
      }else if(to.path == "/Details/"+this.$store.state.DetailsID){
         this.$store.state.MenuShow = false;
          this.$store.state.scrollShow=true;
         this.$store.state.routerShow=false;
      }

       if (isBack) {
          this.transitionName = 'slide-left'
        } else {
          this.transitionName = 'slide-right'
        }
        this.$router.isBack = false
        
		},
	},

  components:{
     Menu,
     NavBar
  
    
  },
 
     mounted() {
 
  },
    created: function() {
    // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前尚不可用。

    this.GetHeight();
   
  },
  
   methods: {
         // 滚动到页面顶部
  
       GetHeight() {
        this.$store.state.GetHeight = "height:" + window.innerHeight + "px";
         this.ToastFunction("/")
         this.$store.state.LeftTitle = "";
         

    
    },
    // 后退
   toBack() {
        console.log('点击了返回')
        this.$router.go(-1);
        
      },
      reload(){
			this.isRouterAlive = false;
			this.$nextTick(function () {
				this.isRouterAlive = true
			});
		},

    onClickLeft() {
      this.Toast('返回');
    },
    onClickRight() {
      this.Toast('按钮');
    },
       // 在挂载开始之前被调用：相关的 render 函数首次被调用。

 
    

  }
}
</script>
<style lang="scss">



#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  background-image: url("./assets/images/activityImages/20150806175752_8AHfF.jpeg");
  background-repeat: no-repeat;
  background-position:center;
   position: relative;
}

.MenuPostion {
  position: absolute;
  bottom: 0;

}
.scroll {
  order: 2;
  height: 100%;
 

  

}

.NavBar {
  background-color: rgba(0, 0, 0,.7);  
  
  z-index: 9999;


  


}
.van-nav-bar__title {
  font-size: 0.4rem;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: white;
}
.van-nav-bar__text {
  color: white;
}
.van-nav-bar .van-icon  {
  color: white;

}
.van-nav-bar {
  height: 1.2rem;
}

  .Router {


      transition: all .377s ease;
      will-change: transform;
      backface-visibility: hidden;
      width: 100%;
      height: 100%;
 
      // overflow-x: hidden;
 
    }
    .slide-left-enter,
    .slide-right-leave-active {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }

    .slide-left-leave-active,
    .slide-right-enter {
      opacity: 0;
      transform: translate3d(100%, 0 ,0);
    }
</style>
